<template>
  <!--1.获取元素-->
  <h2 ref="titleRef">我是标题</h2>
  <button ref="btnRef">按钮</button>
  <button @click="getElements">获取元素</button>

  <!-- 2.获取组件实例 -->
  <show-info ref="showInfoRef"></show-info>
</template>

<script>
  import {ref,onMounted} from "vue";
  import ShowInfo from "./ShowInfo.vue"
  export default {
    // vue2的写法：
    // mounted() {
    //   console.log(this.$refs.title);
    //   console.log(this.$refs.btn);
    // }
    components:{
      ShowInfo
    },
    setup(){
      const titleRef=ref()
      const btnRef=ref()
      const showInfoRef=ref()
      // console.log(titleRef.value) // => undefined 因为在执行setup的时候，titleRef是没有挂载的。

      // mounted的生命周期函数
      onMounted(() => {
        console.log("titleRef.value:",titleRef.value)
        console.log("btnRef.value:",btnRef.value)
        console.log("showInfoRef.value:",showInfoRef.value)
        showInfoRef.value.showInfoFoo()
      })

      function getElements(){
        console.log("titleRef.value:",titleRef.value)
      }
      return{
        titleRef,
        getElements,
        btnRef,
        showInfoRef
      }
    }
  }
</script>